<template>
  <el-button type="primary" plain icon="Plus" @click="handleAddPiece" v-show="props.auditStatus!=3"
    >新增</el-button
  >
  <el-tooltip class="item" effect="dark" content="刷新" placement="top">
    <el-button circle icon="Refresh" @click="update" />
  </el-tooltip>
  <el-table
    :data="PieceRuleList"
    border
    style="width: 100%; margin-top: 20px; border-radius: 8px"
    :header-cell-style="{
      background: '#337ecc !important',
      color: '#ffffff',
      border: 'none !important',
    }"
  >
    <el-table-column label="考核目标" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>备注: {{ scope.row.ins }}</div>
          </template>
          <template #reference>
            {{ scope.row.name }}
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      prop="target1,target2"
      label="计件条目"
      width="200"
      class-name="my-content"
    >
      <template #default="scope"
        >{{ scope.row.target1 }} X {{ scope.row.target2 }}</template
      >
    </el-table-column>
    <el-table-column
      prop="target1,num"
      label="价目"
      width="200"
      class-name="my-content"
    >
      <template #default="scope"
        >{{ scope.row.target1 }} ： {{ scope.row.targetNum }}￥</template
      >
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态"
      width="100"
    >
      <template #default="scope">
        <el-tag
          :type="scope.row.tag === 'Home' ? '' : 'success'"
          disable-transitions
          >{{ scope.row.state === 0 ? "未启用" : "启用" }}</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="最后更新时间" width="200">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-show="props.auditStatus!=3">编辑</el-button>
        <el-button
        v-show="props.auditStatus!=3"
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <PieceDialog
    v-model="PieceDialogVisible"
    :fourthId="fourthId"
    :id="id"
    :close="close"
    :update="update"
    :selectContent="selectContent"
    :dialogType="dialogType"
    :title="title"
  ></PieceDialog>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, reactive, watch } from "vue";
import { getPieceRuleList } from "@/api/api";
import { getPositionPieceList,removeAssessor } from "@/api/piece";
import PieceDialog from "./PieceDialog";
import { ElMessage } from "element-plus";

let props = defineProps({
  id: {
    type: String,
    required: true, //是否规定必须得有
  },
  fourthId: {
    type: Number,
    required: true,
  },
  thirdId: {
    type: Number,
    required: true,
  },
  auditStatus:{
    type: Number,
    require: true,
  }
});
const id = ref({
  id: props.id,
});
const fourthId = ref({
  fourthId: Number(props.fourthId),
});
const PieceRuleList = ref([]);
onBeforeMount(() => {
  let positionId = props.id;
  getPositionPieceList({ positionId }).then((data) => {
    PieceRuleList.value = data.data;
  });
});
watch(
  PieceRuleList,
  (newVal) => {
    
  },
  { deep: true }
);

const title = ref("添加计件条目");
const dialogType = ref("add");
const selectContent = ref([]);
const PieceDialogVisible = ref(false);
const handleAddPiece = (row) => {
  title.value = "添加计件条目";
  dialogType.value = "add";
  PieceDialogVisible.value = true;
  selectContent.value = {
    id:"",
    pieceId: "",
    positionId: "",
    unit: "",
    assessorId: "",
    state: true,
    ins: "",
  };
};
const handleEdit = (index, row) => {
  title.value = "编辑计件条目";
  dialogType.value = "edit";
  PieceDialogVisible.value = true;
  selectContent.value = row;
};
const handleDelete = (index, row) => {
  removeAssessor(row).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      update();
    } else {
      ElMessage.error("删除失败");
    }
  });
};

const close = () => {
  PieceDialogVisible.value = false;
};
const update = () => {
  let positionId = props.id;
  getPositionPieceList({ positionId }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "更新成功",
        type: "success",
      });
      PieceRuleList.value = data.data;
    } else {
      ElMessage.error("更新失败");
    }
  });
};
</script>

<style lang="scss" scoped>
.title1 {
  color: #95d475;
  width: 200px;
  height: 45px;
  font-size: 25px;
  background: rgba(179, 225, 157, 0.4);
  text-align: center;
  border-radius: 10px;
  margin: 50px auto 20px;
  line-height: 45px;
  border-top: #95d475 2px solid;
  border-bottom: #95d475 2px solid;
  box-shadow: 5px 5px 10px rgba(179, 225, 157, 0.5);
}
:deep(.my-content) {
  background: #ecf5ff !important;
  font-size: 15px;
}
</style>